<template>
  <div><button @click="additionHandle">+加法器</button></div>
  <div><button @click="sendMsg">发送</button></div>
  <div>我收到了下一句:{{ msg }}</div>
</template>

<!-- <script>
import eventBus from '@/utils/eventBus'
export default {
  name: 'Child1',
  data() {
    return {
      num: 1
    }
  },
  methods: {
    additionHandle() {
      eventBus.emit('addition', {
        num: this.num++
      })
    }
  }
}
</script> -->
<script setup>
import eventBus from '@/utils/eventBus'
import { ref, onBeforeUnmount } from 'vue'
const num = ref(0)
const msg = ref('')
const additionHandle = () => {
  eventBus.emit('addition', {
    num: ++num.value
  })
}
const setData = (param) => {
  console.log('param: ', param)
  num.value = param.num
}
const sendMsg = () => {
  eventBus.emit('sm', {
    msg: '得即高歌失即休' + msg.value
  })
}
const useMsg = (param) => {
  msg.value = param.rMsg
}
eventBus.on('init', setData)
eventBus.on('rMsg', useMsg)
onBeforeUnmount(() => {
  // 在组件销毁前，从事件总线中移除事件监听
  console.log('移除事件监听者2')
  eventBus.off('init', setData)
  eventBus.off('rMsg', useMsg)
})
</script>
